<template>
  <div>
    <el-dialog width="800px" destroy-on-close append-to-body :visible.sync="show" :before-close="cancel">
      <template #title>
        <div>
          <span>{{ $t('自派送批次') }}</span> <b style="margin: 0 10px">{{ formData.name }}</b>
          <span>{{ $t('车辆选择') }}</span>
        </div>
      </template>
      <el-row class="mb8" :gutter="10">
        <el-col :span="6">
          包裹数量: <b>{{ packageNum }}</b>
        </el-col>
        <el-col :span="6">
          批次总重:<b>{{ loadWeightTotal }} kg</b>
        </el-col>
      </el-row>
      <div class="car-select">
        <div class="car-select-item" v-for="(item, index) in selectedVehicleList" :key="item.id">
          <div class="car-select-item_delete">
            <i
              class="el-icon-close"
              @click="
                () => {
                  selectedVehicleList.splice(index, 1)
                }
              "
            ></i>
          </div>
          <div>{{ item.displayName }}</div>
          <div>
            载重: <b>{{ item.loadWeight }} kg</b>
          </div>
          <div>
            是否已分配行程:
            <span :style="{ color: 'red' }" v-if="item.isAllocation == 0">
              {{ $t('未分配') }}
            </span>
            <span :style="{ color: 'blue' }" v-if="item.isAllocation == 1">
              {{ $t('已分配') }}
            </span>
          </div>
        </div>
        <div>
          <div class="_icon" @click="handleOpenSelectCar">
            <i class="el-icon-plus"></i>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="handleSubmit" type="primary">{{ $t('确认') }}</el-button>
        <el-button @click="cancel">{{ $t('关闭') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width="600px"
      :title="$t('选择车辆')"
      destroy-on-close
      append-to-body
      :visible.sync="selectCar.show"
      :before-close="() => (selectCar.show = false)"
    >
      <el-form @submit.native.prevent ref="formRef" :model="selectCar.form" :rules="selectCar.rules" label-width="80px">
        <el-form-item :label="$t('车辆名称')" prop="id">
          <el-select multiple style="width: 100%" clearable filterable v-model="selectCar.form.id">
            <el-option :label="item.displayName" :value="item.id" v-for="item in vehicleList" :key="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleSelectCar" type="primary">{{ $t('确认') }}</el-button>
        <el-button @click="selectCar.show = false">{{ $t('关闭') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getVehicleList, setVehicle } from '@/api/orderManage/batchDispatch'

export default {
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      /**包裹数量 */
      packageNum: '',
      /**批次总重 */
      loadWeightTotal: '',
      vehicleList: [],
      _vehicleList: [],
      /**已分配的列表 */
      selectedVehicleList: [],
      selectCar: {
        show: false,
        form: {
          id: [],
        },
        rules: {
          id: [{ required: true, message: this.$t('请选择'), trigger: 'blur' }],
        },
      },
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  methods: {
    handleSelectCar() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.selectCar.form.id.map((id) => {
            const item = this._vehicleList.find((v) => v.id == id)
            this.selectedVehicleList.push(item)
          })
          this.selectCar.show = false
        }
      })
    },
    handleOpenSelectCar() {
      this.selectCar.form.id = []
      const selectedIds = this.selectedVehicleList.map((i) => i.id)
      // 筛选已经选择过的车辆
      this.vehicleList = this._vehicleList.filter((i) => {
        return i.isAllocation == 0 && !selectedIds.includes(i.id)
      })
      this.selectCar.show = true
    },
    getList() {
      getVehicleList({ batchId: this.formData.id }).then((res) => {
        this.packageNum = res.data.packageNum
        this.loadWeightTotal = res.data.loadWeightTotal
        this.vehicleList = res.data.allVehicleList
        this._vehicleList = res.data.allVehicleList
        this.selectedVehicleList = res.data.vehicleList || []
      })
    },

    handleSubmit() {
      const data = {
        id: this.formData.id,
        vehiclesIds: this.selectedVehicleList.map((i) => i.id).toString(),
      }
      setVehicle(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$emit('getList')
          this.cancel()
        }
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
.car-select {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  white-space: nowrap;
  gap: 15px;
  $border: 1px solid #ccc;
  padding: 10px 0;
  $boxWidth: 170px;
  &-item {
    padding: 10px;
    width: $boxWidth;
    height: $boxWidth;
    border: $border;
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    flex-direction: column;
    border-radius: 5px;
    position: relative;
    &_delete {
      cursor: pointer;
      position: absolute;
      right: 3px;
      top: 3px;
      width: 30px !important;
      height: 30px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
      &:hover {
        color: red;
      }
    }
    div {
      &:nth-child(1) {
        width: 100%;
        text-align: center;
        font-weight: bold;
      }
    }
  }
  ._icon {
    display: flex;
    width: $boxWidth;
    height: $boxWidth;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #b3b3b3cc;
    border: 1px dashed;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
      border-color: #409eff;
      color: #409eff;
    }
  }
}
</style>
